<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <script src='https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.js'></script> -->
    <script src="./js/echarts.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById("chart");
      /*
       * dark 暗色主题
       * renderer 默认是使用的 canvas渲染，也可以改成 svg渲染，如下
       */
      const chart = echarts.init(chartDom);
      chart.setOption({
        xAxis: [
          {
            type: "category",
            gridIndex: 0,
          },
          {
            type: "category",
            gridIndex: 1,
          },
        ],
        yAxis: [
          {
            min: 0,
            max: 100,
            gridIndex: 0,
          },
          {
            // 隐藏右边坐标系的y轴
            splitLine: {
              show: false,
            },
            gridIndex: 0,
          },
          {
            min: 0,
            max: 150,
            gridIndex: 1,
          },
        ],
        grid: [
          {
            bottom: "55%",
          },
          {
            top: "55%",
          },
        ],
        dataset: {
          source: [
            ["product", "2012", "2013", "2014", "2015"],
            ["Matcha Latte", 41.1, 30.4, 65.1, 53.3],
            ["Milk Tea", 86.5, 92.1, 85.7, 83.1],
          ],
        },
        series: [
          { type: "bar", seriesLayoutBy: "row", xAxisIndex: 0, yAxisIndex: 0 },
          {
            type: "line",
            seriesLayoutBy: "row",
            xAxisIndex: 0,
            yAxisIndex: 1,
          },
          { type: "bar", seriesLayoutBy: "row", xAxisIndex: 1, yAxisIndex: 2 },
        ],
      });
    </script>
  </body>
</html>
